<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{baseui/head :: head}">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content="动检通智慧云平台"/>
    <meta name="author" content="牧中(上海)物联网科技有限公司"/>
    <link rel="shortcut icon" href="/webjars/images/favicon.png"/>

    <title>牧中畜牧业大数据智慧云平台V1.0</title>


</head>
<body>
<!--顶部一级导航-->
<th:block th:replace="baseui/topheader :: topheader(1)"/>

<!--动检通菜单-->
<div id="topnav" th:replace="djt/partial/topnav :: topnav(3)"></div>
<div id="cl-wrapper">
    <!--左边导航-->
    <th:block th:replace="djt/partial/quarantine_left :: nav(1)"/>

    <div class="container-fluid" id="pcont">

        <div class="cl-mcont">

            <!--屠宰总体情况-->
            <div class="row">
                <div class="col-md-12">
                    <div class="block-flat">
                        <div class="header">
                            <div class="pull-right" style="width:85%">

                                <div class="row show-grid">
                                    <div class="col-md-2">
                                       <!-- <div class="btn-group">
                                            <button id="tzweek" type="button" class="btn btn-default">本周</button>
                                            <button id="tzmonth" type="button" class="btn btn-default">本月</button>
                                        </div>
-->
                                    </div>
                                    <div class="col-md-3">
                                        <div class="input-daterange input-group">
                                            <input type="text" id="tzstart" class="input-sm form-control date datetime"
                                                   data-min-view="2" name="start" value="2017-07-20"
                                                   data-date-format="yyyy-mm-dd">
                                            <span class="input-group-addon">到</span>
                                            <input type="text" id="tzend" class="input-sm form-control date datetime"
                                                   data-min-view="2" name="end" value="2017-07-26"
                                                   data-date-format="yyyy-mm-dd">
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <select id="tzarea" class="select2" style="width: 150px">
                                            <option value="">所有区域</option>
                                            <optgroup th:each="cityarea:${areaList}"
                                                      th:label="${cityarea.city}">
                                                <option th:each="region:${cityarea.region}"
                                                        th:text="${region}" th:value="${region}"></option>
                                            </optgroup>

                                        </select>

                                    </div>
                                    <div class="col-md-2">
                                        <select id="tztype" class="form-control">
                                            <option value="0">所有畜种</option>

                                            <option value="1">猪</option>
                                            <option value="2">羊</option>
                                            <option value="3">牛</option>
                                            <option value="4">家禽</option>
                                        </select>
                                    </div>

                                    <div class="col-md-1">
                                        <button id="tzsearch" type="button" class="btn btn-primary">搜索</button>
                                    </div>

                                </div>


                            </div>
                            <br />
                            <h4>屠宰总体情况</h4>

                        </div>
                        <div class="content">
                            <div class="row">

                                <div class="col-md-6 col-sm-6">
                                    <table class="no-border blue">
                                        <thead class="no-border">
                                        <tr>
                                            <th></th>

                                            <th></th>
                                            <th>同比</th>

                                            <th class="text-right">环比</th>
                                        </tr>
                                        </thead>
                                        <tbody class="no-border-x">
                                        <tr>
                                            <td>发起屠宰申请数</td>
                                            <td id="tzsq">2000</td>
                                            <td><i class="fa fa-angle-up"></i><span id="tzsqt">30%</span></td>

                                            <td class="text-right color-danger"><i class="fa fa-angle-up"></i><span id="tzsqh">30%</span></td>
                                        </tr>
                                        <tr>
                                            <td>本地屠宰数量</td>
                                            <td id="bdtz">2000</td>
                                            <td><i class="fa fa-angle-up"></i><span id="bdtzt">30%</span></td>

                                            <td class="text-right color-danger"><i class="fa fa-angle-up"></i><span id="bdtzh">30%</span></td>
                                        </tr>
                                        <tr>
                                            <td>外地入场数量</td>
                                            <td id="wdrc">2000</td>
                                            <td><i class="fa fa-angle-up"></i><span id="wdrct">30%</span></td>

                                            <td class="text-right color-danger"><i class="fa fa-angle-up"></i><span id="wdrch">30%</span></td>
                                        </tr>

                                        <tr>
                                            <td>合格数</td>
                                            <td id="hg">2000</td>
                                            <td><i class="fa fa-angle-up"></i><span id="hgst">30%</span></td>

                                            <td class="text-right color-danger"><i class="fa fa-angle-up"></i><span id="hgsh">30%</span></td>
                                        </tr>
                                        <tr>
                                            <td>不合格数</td>
                                            <td id="bhg">2000</td>
                                            <td><i class="fa fa-angle-up"></i><span id="bhgst">30%</span></td>

                                            <td class="text-right color-danger"><i class="fa fa-angle-up"></i><span id="bhgsh">30%</span></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-md-6 col-sm-6">
                                    <div id="ruchangChart" style="width: 500px;height:200px;"></div>
                                </div>


                            </div>

                        </div>


                    </div>
                </div>

            </div>
            <!--产地检疫总体情况end-->
            <!--本地屠宰场-->
            <div class="row">
                <div class="col-md-12">
                    <div class="block-flat">
                        <div class="header">
                            <div class="pull-right" style="width:80%">

                                <div class="row show-grid">
                                  <!--  <div class="col-md-2">
                                        <div class="btn-group">
                                            <button id="tzlyweek" type="button" class="btn btn-default">本周</button>
                                            <button id="tzlymonth" type="button" class="btn btn-default">本月</button>
                                        </div>

                                    </div>-->
                                    <div class="col-md-3">
                                        <div class="input-daterange input-group" id="datepicker">
                                            <input type="text" id="tzlystart" class="input-sm form-control date datetime"
                                                   data-min-view="2" name="start" value="2017-07-20"
                                                   data-date-format="yyyy-mm-dd">
                                            <span class="input-group-addon">到</span>
                                            <input type="text" id="tzlyend" class="input-sm form-control date datetime"
                                                   data-min-view="2" name="end" value="2017-07-26"
                                                   data-date-format="yyyy-mm-dd">
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <select id="tzlyarea" class="select2" style="width: 150px">
                                            <option value="">所有区域</option>
                                            <optgroup th:each="cityarea:${areaList}"
                                                      th:label="${cityarea.city}">
                                                <option th:each="region:${cityarea.region}"
                                                        th:text="${region}" th:value="${region}"></option>
                                            </optgroup>

                                        </select>

                                    </div>

                                    <div class="col-md-2">
                                        <select id="tzlytype" class="form-control">
                                            <option value="0">所有畜种</option>

                                            <option value="1">猪</option>
                                            <option value="2">羊</option>
                                            <option value="3">牛</option>
                                            <option value="4">家禽</option>
                                        </select>
                                    </div>

                                    <div class="col-md-1">
                                        <button type="button" id="tzlysearch" class="btn btn-primary">搜索</button>
                                    </div>

                                </div>


                            </div>
                            <br />
                            <h4>屠宰来源分布图</h4>

                        </div>
                        <div class="content">
                            <div class="row">

                                <div class="col-md-6 col-sm-6">
                                    <table class="no-border blue">
                                        <thead class="no-border">
                                        <tr>
                                            <th>排行</th>
                                            <th>屠宰场名称</th>

                                            <th>数量</th>
                                            <th>占比</th>
                                            <th>同比</th>

                                            <th class="text-right">环比</th>
                                        </tr>
                                        </thead>
                                        <tbody id="tzlytable" class="no-border-x">
                                        <tr>
                                            <td>1</td>
                                            <td>焕山屠宰场</td>
                                            <td>2000</td>
                                            <td><i class="fa fa-angle-up"></i>30%</td>
                                            <td><i class="fa fa-angle-up"></i>30%</td>

                                            <td class="text-right color-danger"><i class="fa fa-angle-up"></i>28%</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>焕山屠宰场</td>
                                            <td>2000</td>
                                            <td><i class="fa fa-angle-up"></i>30%</td>
                                            <td><i class="fa fa-angle-up"></i>30%</td>

                                            <td class="text-right color-danger"><i class="fa fa-angle-up"></i>28%</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>焕山屠宰场</td>
                                            <td>2000</td>
                                            <td><i class="fa fa-angle-up"></i>30%</td>
                                            <td><i class="fa fa-angle-up"></i>30%</td>

                                            <td class="text-right color-danger"><i class="fa fa-angle-up"></i>28%</td>
                                        </tr>
                                        <tr>
                                            <td>4</td>
                                            <td>焕山屠宰场</td>
                                            <td>2000</td>
                                            <td><i class="fa fa-angle-up"></i>30%</td>
                                            <td><i class="fa fa-angle-up"></i>30%</td>

                                            <td class="text-right color-danger"><i class="fa fa-angle-up"></i>28%</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-md-6 col-sm-6">
                                    <div id="tuzaifromChart" style="width: 500px;height:200px;"></div>
                                </div>


                            </div>

                        </div>


                    </div>
                </div>

                <!--本地屠宰场end-->
            </div>
        </div>
    </div>

</div>

<script type="text/javascript" src="/webjars/js/jquery.js"></script>


<script type="text/javascript" src="/webjars/js/jquery.nanoscroller/jquery.nanoscroller.js"></script>
<script type="text/javascript" src="/webjars/js/behaviour/general.js"></script>
<script src="/webjars/js/jquery.ui/jquery-ui.js" type="text/javascript"></script>

<script type="text/javascript" src="/webjars/js/jquery.nestable/jquery.nestable.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.switch/bootstrap-switch.min.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="//cdn.bootcss.com/select2/3.4.5/select2.min.js" type="text/javascript"></script>

<script src="/webjars/js/bootstrap.slider/js/bootstrap-slider.js" type="text/javascript"></script>
<script type="text/javascript" src="/webjars/js/jquery.niftymodals/js/jquery.modalEffects.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.summernote/dist/summernote.min.js"></script>

<script type="text/javascript" src="/webjars/js/jquery.magnific-popup/dist/jquery.magnific-popup.min.js"></script>


<script src="/webjars/js/behaviour/voice-commands.js"></script>
<script src="/webjars/js/bootstrap/dist/js/bootstrap.min.js"></script>

<script src="//cdn.bootcss.com/echarts/3.6.2/echarts.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        App.init();

    });
</script>

<script type="text/javascript">

    //--------------去向分布变化---------------------------
    tzjy = function (time1) {
        if (time1 == null || time1 == "") {
            time1 = $("#tzstart").val();
        }

        var datas = {
            'start': time1 == "" ? new Date("2000-01-01 :00:00:00") : new Date(time1),
            'end': $("#tzend").val() == "" ? new Date("2020-01-01 :00:00:00") : new Date($("#tzend").val()),
            'area': $("#tzarea").val(),
            'type': $("#tztype").val()
        }

        $.ajax({
            type: "GET",
            url: "/djt/quarantine/tzjy",
            data: datas,
            dataType: "json",
            success: function (data) {
                $.each(data, function (index, item) {
                    $("#tzsq").text(item.ranking);
                    $("#bdtz").text(item.islocal);
                    $("#wdrc").text(item.notlocal);
                    $("#hg").text(item.qualified);
                    $("#bhg").text(item.unqualified);
                    $("#tzsqt").text(item.rankingt*100+"%");
                    $("#bdtzt").text(item.islocalt*100+"%");
                    $("#wdrct").text(item.notlocalt*100+"%");
                    $("#hgst").text(item.qualifiedt*100+"%");
                    $("#bhgst").text(item.unqualifiedt*100+"%");
                    $("#tzsqh").text(item.rankingh*100+"%");
                    $("#bdtzh").text(item.islocalh*100+"%");
                    $("#wdrch").text(item.notlocalh*100+"%");
                    $("#hgsh").text(item.qualifiedh*100+"%");
                    $("#bhgsh").text(item.unqualifiedh*100+"%");

                    var ruchangChart = echarts.init(document.getElementById('ruchangChart'));
                    option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b}: {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            x: 'left',
                            data: ['本地入场', '外地入场']
                        },
                        series: [
                            {
                                name: '数量',
                                type: 'pie',
                                radius: ['50%', '70%'],
                                avoidLabelOverlap: false,
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        show: true,
                                        textStyle: {
                                            fontSize: '24',
                                            fontWeight: 'bold'
                                        }
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        show: false
                                    }
                                },
                                data: [
                                    {value: item.islocal, name: '本地入场'},
                                    {value: item.notlocal, name: '外地入场'}

                                ]
                            }
                        ]
                    };
                    ruchangChart.setOption(option);
                })
            }

        })
    }

    function numzb(num1, num2) {
        if (num2 == 0) {
            return 0;
        }
        var i = Number(num1);
        var m = Number(num2);
        var result = (m - i) / m;
        return result.toFixed(2);
    }

    //--------------屠宰来源变化---------------------------

    /* <tr>
     <td>1</td>
     <td>焕山屠宰场</td>
     <td>2000</td>
     <td><i class="fa fa-angle-up"></i>30%</td>
     <td><i class="fa fa-angle-up"></i>30%</td>

     <td class="text-right color-danger"><i class="fa fa-angle-up"></i>28%</td>
     </tr>*/
    tzly = function (time1) {
        if (time1 == null || time1 == "") {
            time1 = $("#tzlystart").val();
        }

        var datas = {
            'start': time1 == "" ? new Date("2000-01-01 :00:00:00") : new Date(time1),
            'end': $("#tzlyend").val() == "" ? new Date("2020-01-01 :00:00:00") : new Date($("#tzlyend").val()),
            'area': $("#tzlyarea").val(),
            'type': $("#tzlytype").val()
        }

        $.ajax({
            type: "GET",
            url: "/djt/quarantine/tzly",
            data: datas,
            dataType: "json",
            success: function (data) {

                var tzlytable = "";
                var tzlyname = "";
                var tzlydata = "";
                $.each(data, function (index, item) {

                    var num = index + 1;
                    tzlytable += "<tr>" +
                        "<td>" + num + "</td>" +
                        "<td>" + item.name + "</td>" +
                        "<td>" + item.num + "</td>" +
                        "<td><i class='fa fa-angle-up'></i>" + numzb(num,item.allnum)+"%" + "</td>" +
                        "<td><i class='fa fa-angle-up'></i>" + item.numt+"%" + "</td>"+
                        "<td class='text-right color-danger'><i class='fa fa-angle-up'></i>" + item.numh+"%" + "</td>";
                    tzlyname += "\"" + item.name + "\"";
                    tzlydata += "{\"value\":\"" + item.num + "\",\"name\":\"" + item.name + "\"}";
                    if (num < data.size) {
                        tzlyname += ",";
                        tzlydata += ",";
                    }

                })
                /* bdname += "]";*/
                $("#tzlytable").html("");
                $("#tzlytable").append(tzlytable);
                tzlyname = JSON.parse(tzlyname);
                tzlydata = JSON.parse(tzlydata);
                var tuzaifromChart = echarts.init(document.getElementById('tuzaifromChart'));
                option = {

                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'right',
                        data: [tzlyname]
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [tzlydata],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                tuzaifromChart.setOption(option);
            }

        })
    }


</script>

<script type="text/javascript">
    //排行
    $(function () {
        //格式化日期：yyyy-MM-dd
        function formatDate(date) {
            var myyear = date.getFullYear();
            var mymonth = date.getMonth() + 1;
            var myweekday = date.getDate();

            if (mymonth < 10) {
                mymonth = "0" + mymonth;
            }
            if (myweekday < 10) {
                myweekday = "0" + myweekday;
            }
            return (myyear + "-" + mymonth + "-" + myweekday);
        }

        (function () {
            tzjy(null);
            tzly(null);
            $("#tzsearch").click(function () {
                tzjy(null);
            });

            $("#tzweek").click(function () {
                var now = new Date()
                var time1 = formatDate(new Date(now.getFullYear(), now.getMonth(), now.getDate() - now.getDay()));
                tzjy(new Date(time1));
            })
            $("#tzmonth").click(function () {
                var now = new Date()
                var time1 = formatDate(new Date(now.getFullYear(), now.getMonth(), 1));
                tzjy(new Date(time1));
            })
            $("#tzlysearch").click(function () {
                tzly(null);
            });

            $("#tzlyweek").click(function () {
                var now = new Date()
                var time1 = formatDate(new Date(now.getFullYear(), now.getMonth(), now.getDate() - now.getDay()));
                tzly(new Date(time1));
            })
            $("#tzlymonth").click(function () {
                var now = new Date()
                var time1 = formatDate(new Date(now.getFullYear(), now.getMonth(), 1));
                tzly(new Date(time1));
            })
        })()


    })

</script>

</body>
</html>
